<template>
  <div>
    <p>idle: {{ idle }}</p>
    <p>lastActive: {{ idledFor }}</p>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue';
import { useIdle, useTimestamp } from '@vueuse/core';

const { idle, lastActive } = useIdle(1000 * 5);

const now = useTimestamp();
const idledFor = computed(() => Math.floor((now.value - lastActive.value) / 1000));

watch(idle, value => {
  value && alert('已在当前页面无操作停留超过10s');
  idle.value = false;
});
</script>
